<template>
  <div class="app-container">
    <el-form class="flex_box_between" :inline="true" label-width='100px'>
      <el-form-item label="用户名：">
        <el-input v-model="queryParam.username" placeholder="请输入用户名" clearable class="filter-item"></el-input>
      </el-form-item>
      <el-form-item label="账号：">
        <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable class="filter-item" />
      </el-form-item>
      <el-form-item label="用户类型：">
        <el-select v-model="queryParam.user_type" placeholder="请选择用户类型" class="filter-item">
          <el-option
            v-for="item in userTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号类型：">
        <el-select v-model="queryParam.mobileType" placeholder="请选择账号类型" class="filter-item">
          <el-option
            v-for="item in accountTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户来源：">
        <el-select v-model="queryParam.source" placeholder="请选择用户来源" class="filter-item">
          <el-option
            v-for="item in sourceList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否有简历：">
        <el-select v-model="queryParam.is_resume" class="filter-item">
          <el-option label="有简历" value="1"></el-option>
          <el-option label="无简历" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否有职位：">
        <el-select v-model="queryParam.is_post" placeholder="是否有职位" class="filter-item">
          <el-option label="有职位" value="1"></el-option>
          <el-option label="无职位" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册日期：">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="filter-item form-search-date"
          @change='timeChange'
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="登录日期：">
        <el-date-picker
          v-model="time1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="filter-item form-search-date"
          @change='timeChange1'
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="flex_box_center search_btns">
      <el-button class="filter-item search" type='primary' icon="iconfont icon-sousuo" @click="handleSearch">查询</el-button>
      <el-button class="filter-item search" type="info" plain icon="iconfont icon-zhongzhi" @click="handleRefresh">重置</el-button>
      <el-button class="filter-item search" icon="iconfont icon-daochu" @click="handleExport">导出</el-button>
      <el-button class="filter-item search" icon="iconfont icon-piliangdaoru" @click="handleImport">批量导入</el-button>
      <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="handleCreate('添加用户')">添加用户</el-button>
    </div>
    <el-row class="count_box" :gutter="35">
      <el-col :span="8">
        <div class="count_item flex_box_center">
          <p class="icon icon1"></p>
          <div class="count_info">
            <p>{{count}}</p>
            <span>总用户</span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="count_item flex_box_center">
          <p class="icon icon2"></p>
          <div class="count_info">
            <p>{{user_count}}</p>
            <span>个人用户</span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="count_item flex_box_center">
          <p class="icon icon3"></p>
          <div class="count_info">
            <p>{{company_count}}</p>
            <span>企业用户</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="用户名" align='center'>
        <template slot-scope="item">
          <p>{{getUserName(item.row)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="账号" align='center' />
      <el-table-column label="用户头像" align='center'>
        <template slot-scope="item">
          <p @click="showUpdateAvatar(item.row)" :style="'background-image:url('+getAvatar(item.row.avatar)+')'" class="avatar"></p>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" align='center'>
        <template slot-scope="item">
          <p>{{item.row.chang_type==1?'个人':item.row.chang_type==2?'企业':''}}</p>
        </template>
      </el-table-column>
      <el-table-column label="来源" align='center'>
        <template slot-scope="item">
          <p>{{getSourceText(item.row.source)}}</p>
        </template>
      </el-table-column>
      <el-table-column label="是否有简历" align='center'>
        <template slot-scope="item">
          <p>{{item.row.resume_count>0?'有':'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="是否有职位" align='center'>
        <template slot-scope="item">
          <p>{{item.row.post_count>0?'有':'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="注册日期" align='center' width='130px'>
        <template slot-scope="item">
          <p>{{item.row.created_at}}</p>
        </template>
      </el-table-column>
      <el-table-column label="登录日期" align='center' width='130px'>
        <template slot-scope="item">
          <p>{{item.row.last_login_date}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='220' align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" @click="handleDetails(item.row.id)" :underline="false"><i class="iconfont icon-chakanxiangqing"></i>查看</el-link>
          <el-link type="primary" class="table_btn" @click="handleUpdate(item.row)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
          <el-link type="danger" class="table_btn" @click="deleteUser(item.row)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <!------------------------- 基本信息 ------------------------------>
    <el-dialog :visible.sync="formVisible" width="516px" @close="handleCancel" :show-close='false'>
      <div slot="title" class="dialog-title">{{title}}</div>
      <el-form :label-position="labelPosition" :ref="formName" :model="formFieldsData" :rules="rules" label-width='80px'>
        <el-form-item label="用户名：" prop="username" v-if="!id">
          <el-input v-model="formFieldsData.username" style="width: 98%" autocomplete="off" clearable readonly/>
        </el-form-item>
        <el-form-item label="账号：" prop="mobile">
          <el-input v-model="formFieldsData.mobile" style="width: 98%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="地址：" prop='district'>
          <addr ref='addr' @addrChange='addrChange'></addr>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size='medium'>取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="avatarVisible" width="516px" @close="avatarVisible=false" :show-close='false'>
      <div slot="title" class="dialog-title">修改头像</div>
      <el-form :label-position="labelPosition" label-width='80px'>
        <el-form-item label="头像：" >
          <el-upload action="" :show-file-list="false" :http-request="upImg" class="photo_box">
            <p class="img" :style="'background-image:url('+getAvatar(avatar)+')'"></p>
            <el-button type='primary'>点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="avatarVisible=false" size='medium'>取 消</el-button>
        <el-button type="primary" @click="avatarSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除用户" :visible.sync="deleteVisible" width="600px" :show-close='false'>
      <div slot="title" class="dialog-title">删除用户</div>
      <p class="info">请问确认删除以下用户吗？</p>
      <el-row>
        <el-col :span="4" class="info">用户名：</el-col>
        <el-col :span="20" class="info">
          {{getUserName(details)}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="info">账号：</el-col>
        <el-col :span="20" class="info">{{details.mobile}}</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteUserSure">确 定</el-button>
      </div>
    </el-dialog>
    <importExcel ref='importExcel'></importExcel>
    <userReview ref='userReview'></userReview>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import addr from '@/components/addr/index.vue'
import { export2Excel } from '@/utils/excel'
import importExcel from '@/components/importExcel'
import userReview from '../components/userReview'
import {uploadImage} from '@/api/talent.js'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/user/admin/user', // 接口地址
      queryParam:{
        username:'',
        mobile:'',
        register_start_time:'',
        register_end_time:'',
        login_start_time:'',
        login_end_time:'',
        user_type:'',
        source:'',
        mobileType:'',
        is_resume:'',
        is_post:'',
        page:1,
        page_size:10,
        is_task:'',
      },// 查询参数
      defaultQueryParam:['page','page_size'],
      company_count:'', // 统计数据
      user_count:'', // 统计数据
      count:'', // 统计数据
      formName:'vipuser', // 表单ref
      time:'',// 注册时间
      time1:'', // 登录时间
      userTypes: [
        {value:1,label:'个人'},
        {value:2,label:'企业'},
        {value:3,label:'综合'}
      ],
      accountTypes: [
        {value:0,label:'所有'},
        {value:1,label:'主账号'},
        {value:2,label:'子账号'}
      ], // 账号类型
      formFieldsData: {
        username: '',
        mobile:'',
        province:'',
        city:'',
        district:''
      },
      // 验证规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        district:[
          { required: true, message: '请选择地址', trigger: 'blur' }
        ]
      },
      details:'', // 详情数据
      detailsVisible:false,// 详情弹框显示与隐藏
      deleteVisible:false, // 删除用户
      avatarVisible:false,// 修改头像弹框
      avatar:''
    }
  },
  mounted() {
  },
  methods: {
    // 查看详情
    handleDetails(item) {
      this.$refs.userReview.show(item)
    },
    // 监听注册时间选择
    timeChange(t) {
      this.queryParam.register_start_time = t[0]
      this.queryParam.register_end_time = t[1]
    },
    // 监听登录时间选择
    timeChange1(t) {
      this.queryParam.login_start_time = t[0]
      this.queryParam.login_end_time = t[1]
    },
    // 获取用户名
    getUserName(item){
      if (item.chang_type==1) {
        return item.resume_count>0?item.profession_user.full_name:item.nick_name?item.nick_name:item.mobile
      } else if(item.chang_type==2){
        return item.profession_company?item.profession_company.name:item.username
      } else {
        item.username || item.mobile
      }
      // if (item.source==5) {
      //   return  item.username || item.nick_name || item.mobile
      // } else {
        
      // }
    },
    // 工作地址
    addrChange(val) {
      this.formFieldsData.province = val.provinceid
      this.formFieldsData.city = val.cityid
      this.formFieldsData.district = val.districtid
    },
    // 显示修改头像弹框
    showUpdateAvatar(item) {
      this.id = item.id
      this.avatar = item.avatar
      this.avatarVisible = true
    },
    upImg(f) {
      let param = new FormData(); //创建form对象
      param.append('image',f.file);//通过append向form对象添加数据
      uploadImage(param).then((res)=>{
        if(res.code == 10000){
          this.avatar = res.data.path
        }else{
          this.$message.error('已超时，请重新上传');
        }
      })
    },
    // 修改头像
    avatarSubmit() {
      let param = {
        avatar:this.avatar
      }
      this.$http.put(this.url+'/'+this.id, param).then((response) => {
        this.handleResponse(response)
        this.avatarVisible = false
      })
    },
    beforeUpdate(info) {
      let area = {
        pid:info.province || '',
        cid:info.city || '',
        did:info.district || '',
        pname:info.province_name || '',
        cname:info.city_name || '',
        dname:info.district_name || ''
      }
      
      this.$nextTick(()=>{
        this.$refs.addr.updateData(area)
      })
    },
    beforeSubmit() {
      if (this.id) {
        this.formFieldsData.username = this.formFieldsData.mobile
      }
    },
    afterCancel() {
      this.$refs[this.formName].resetFields();
    },
    // 删除用户前的提示
    deleteUser(item) {
      this.details  = item
      this.deleteVisible = true
    },
    // 确认删除用户
    deleteUserSure() {
      this.$http.delete(this.url + '/' + this.details.id).then((response) => {
        this.deleteVisible = false
        this.details = ''
        this.$message({
          type: 'success',
          message: response.message
        })
        this.handleRefresh()
      })
    },
    // 导出
    handleExport() {
      let columns = [
        {title:'用户名',key:'name'},
        {title:'账号',key:'mobile'},
        {title:'用户类型',key:'type'},
        {title:'来源',key:'source'},
        {title:'是否有简历',key:'is_resume'},
        {title:'是否有职位',key:'is_post'},
        {title:'注册时间',key:'create_time'},
        {title:'登录时间',key:'login_time'}
      ]
      let list = []
      this.data.forEach(res=>{
        list.push({
          name:this.getUserName(res),
          mobile:res.mobile,
          type:res.chang_type==1?'个人':res.chang_type==2?'企业':'',
          source:this.getSourceText(res.source),
          is_resume:res.resume_count>0?'有':'--',
          is_post:res.post_count>0?'有':'--',
          create_time:res.created_at,
          login_time:res.last_login_date
        })
      })
      export2Excel(columns,list,'用户数据')
    },
    // 批量导入
    handleImport() {
      this.$refs.importExcel.show(1)
    }
  },
  components:{
    importExcel,
    userReview,
    addr
  }
}
</script>
<style lang="scss" scoped>
  .filter-container{
    text-align: left;
  }
  .form-search-date{
    width: 308px;
  }
  .count_box{
    margin-bottom: 20px;
    font-size: 14px;
    color:#222;
    .count_item{
      height: 158px;
      padding:35px 0;
      box-shadow: 0px 0px 6px rgba(22, 78, 138, 0.19);
      box-sizing: border-box;
      cursor: pointer;
      &:hover{
        background: linear-gradient(318deg, #2193FE 0%, #65B5FF 100%);
        p{
          color:#fff;
        }
        span{
          color:#DCDCDC;
        }
        .icon{
          background-color:#fff;
        }
      }
      .icon{
        width: 88px;
        height: 88px;
        background-color: #E8F3FF;
        background-size:inherit;
        background-repeat:no-repeat;
        background-position: center center;
        border-radius: 50%;
        margin-right: 60px;
        &.icon1{
          background-image: url('~@/assets/images/icon17.png');
        }
        &.icon2{
          background-image: url('~@/assets/images/icon18.png');
        }
        &.icon3{
          background-image: url('~@/assets/images/icon19.png');
        }
      }
      p{
        font-size: 46px;
        color:#424554;
        line-height: 46px;
        margin-bottom:4px;
      }
      span{
        font-size: 18px;
        color:#AAAAAA;
        line-height: 31px;
      }
    }
  }
  .info{
    line-height: 36px;
  }
  .avatar{
    width: 50px;
    height: 50px;
    margin:0 auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }
  .img{
    width: 150px;
    height: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom:10px;
  }
</style>